<!--  -->
<template>
	<view class="backcolor">
		<view class="wh">
			<view class="top-inp">
				<view class="input">
					<input type="text" value="" placeholder="搜索关键字" v-model="name" />
					<text class="iconfont icon-sousuo"></text>
				</view>

				<view class="view">
					<picker @change="bindPickerChange" :value="array" :range="array">
						{{services == '' ?saixuan  :services}}
					</picker>
					<text class="iconfont icon-shaixuan"></text>
				</view>
			</view>
			<view class="body-content">
				<view class="content" v-for="(item,index) in listData" :key="index">
					<view class="content-img">
						<image :src="item.logo!='' ? images + item.logo : ios" mode=""></image>
					</view>
					<view class="content-font">
						<text>{{item.name!='' ? item.name : '暂无门店名称'}}</text>
						<text>{{item.services!='' ? item.services :'暂无经营范围'}}</text>
						<button @click="$nav('../storesDetail/storesDetail',item.id)">查看详情</button>
					</view>
				</view>

			</view>
			<view class="box" v-if="box" style="height: 200rpx;display: flex;justify-content: center;">
				没有更多门店了.......
			</view>
		</view>
	</view>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import {
		Stores
	} from '../../static/api/apis.js'
	import {debounce} from '../../tool/anti-shake.js'
	export default {
		//import引入的组件需要注入到对象中才能使用
		components: {},
		data() {
			//这里存放数据
			return {
				saixuan: "筛选",

				listData: [],
				array: ['蔬菜水果', '早餐早点', '服装鞋帽'],
				page: 1,
				psize: 5,
				box: false,
				name: "",
				services: "",
				images: "http://estate.eshareedu.cn/estate/upload/",
				ios: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2FQ_862WL6qzdn1ZLkSjUnVNZrXTLMvSNpvXenZpPesp3uq6d5-stDNs9b0W58yw6TTYGVDmosZWTLal1WbWRW3A.jpg&refer=http%3A%2F%2Fqcloud.dpfile.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649659924&t=bccacf478705ace71ef3c217550deeb1",
			};
		},
		//监听属性 类似于data概念
		computed: {},
		//监控data中的数据变化
		watch: {
			name(data) {
				// 
				this.data = data
				this.box = false
				this.page = 1
				this.listData = []
				this.debouncefun()
			},
		},
		//方法集合
		methods: {

			async list() {
				let res = await Stores.storesList({
					page: this.page,
					psize: this.psize,
					key: this.name,
					services: this.services,
				})
				console.log("res", res)
				if (res.errCode == '10000' && res.data.list.length != 0) {
					// this.listData = 
					this.listData = this.listData.concat(res.data.list)
					uni.stopPullDownRefresh(); //下拉刷新关闭"
					uni.hideLoading() //用户上拉刷新隐藏转圈
				} else if (res.data.list.length == 0) {
					this.box = true
					uni.stopPullDownRefresh(); //下拉刷新关闭"
					uni.hideLoading() //用户上拉刷新隐藏转圈
				}
			},
			debouncefun:debounce(function(){
				this.list()
			},1000),
			//选择器
			bindPickerChange(index) {
				console.log(index)
				this.box = false
				this.services = this.array[index.detail.value]
				this.listData = []
				this.page = 1
				this.list()
			},
		},
		//搜索

		//下拉
		onPullDownRefresh: function() {
			this.box = false
			this.page = 1
			this.listData = []
			this.debouncefun()
		},
		//上拉
		onReachBottom: function(e) { //nvue暂不支持滚动监听，可用bindingx代替    上拉
			uni.showLoading() //用户上拉刷转圈
			this.page++
			this.debouncefun()
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {
			this.list()
		},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {

		},
	}
</script>
<style lang='less' scoped>
	//@import url(); 引入公共css类
	@import url('../../static/css/storesList.less');
</style>
